<template>
	<view class="main-content">
		<text class="student-name">{{data.name}}同学成绩单</text>
		<uni-data-select 
		v-model="data.value" 
		:localdata="data.range"
		placeholder="请选择学期"
		@change="change">
		</uni-data-select>
		<br/>
		<uni-table border stripe emptyText="暂无数据">
			<uni-tr>
				<uni-th align="center" width="150">科目</uni-th>
				<uni-th align="center" width="50">成绩</uni-th>
				<uni-th align="center" width="50">学分</uni-th>
				<uni-th align="center" width="50">绩点</uni-th>
			</uni-tr>
			<uni-tr v-for="item in data.tableShow" :key="item.id">
				<uni-td align="center">{{ item.name}}</uni-td>
				<uni-td align="center">{{ item.tran}}</uni-td>
				<uni-td align="center">{{ item.point}}</uni-td>
				<uni-td align="center">{{ item.gride}}</uni-td>
			</uni-tr>
		</uni-table>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				data:{
					name:'张依依',
					value:'',
					range:[
						{value:0,text:'篮球'},
						{value:1,text:'足球'}
					],
					tableShow:[
						{id:1,name:'《程序设计基础》',tran:90,point:2,gride:3.6},
						{id:2,name:'《程序设计基础》',tran:90,point:2,gride:3.6},
						{id:3,name:'《程序设计基础》',tran:90,point:2,gride:3.6},
						{id:4,name:'《程序设计基础》',tran:90,point:2,gride:3.6},
					]
				}
			}
		},
		methods: {
			change(e){
				console.log(e);
			}
		}
	}
</script>

<style scoped>
	page{
		width: 100%;
		height: 100%;
	}
	.main-content{
		display: flex;
		flex-direction: column;
		padding: 100rpx 60rpx;
	}
	.student-name{
		font-size: 48rpx;
		font-weight: 500;
		letter-spacing: 4rpx;
		margin-bottom: 10rpx;
	}
	uni-table uni-tr uni-th,
	uni-table uni-tr uni-td{
		font-size: 28rpx;
	}
	uni-table uni-tr uni-th{
		background: rgba(221, 221, 221, 1);
	}
	
</style>
